<template>
  <div id="office">
    <div id="chart"
         :style="{height:height,width:width}" />
    <img id="img"
         src="~@/assets/office/office2.jpg"
         alt=""
         style="display:none"
         :style="{height:height,width:width}">
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
// import { Queue } from '@/utils'
import mapData from '@/constants/Map.constants'
// import { fetchList } from '@/api/data'

export default {
  mixins: [resize],
  // props:['id','show2D','tagId','width','height'],
  props: {
    // className: {
    //   type: String,
    //   default: 'chart'
    // },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '800px'
    },
    height: {
      type: String,
      default: '600px'
    },
    areaSelected: {
      type: Array
    },
    permissionType: {
      type: String
    }
  },
  data() {
    return {
      chart: null,
      img: new Image(), // 背景图片缓存
      img2: null, // 背景图片缓存
      img3: new Image(),
      canvas: null,
      imgSrc: require('@/assets/office/office2.jpg'),
      context: {}, // canvas对象
      axis: {
        startX: null,
        endX: null,
        startY: null,
        endY: null,
        symbolSize: 28
      },
      brushStyle_safe: {
        borderWidth: 1,
        color: 'rgba(23,230,27,0.1)',
        borderColor: 'rgba(23,230,27,1)'
      },
      brushStyle_danger: {
        borderWidth: 1,
        color: 'rgba(230,23,27,0.1)',
        borderColor: 'rgba(230,23,27,1)'
      },
      permissionType_origin: null,
      positionTracks: [],
      tagPosition_old: [],
      distance_queue: [],
      options: {
        backgroundColor: {
          image: null,
          repeat: 'no-repeat'
        },
        dataset: {
          dimensions: [],
          source: []
        },
        xAxis: {
          min: 0,
          max: mapData.mapWidth,
          // position:20,
          // offset:20,
          show: false //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          // axisTick: {
          //   show: false //不显示坐标轴刻度线
          // },
          // axisLine: {
          //   show: false //不显示坐标轴线
          // },
          // axisLabel: {
          //   show: false //不显示坐标轴上的文字
          // }
        },
        yAxis: {
          min: 0,
          max: mapData.mapHeight,
          show: false //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          // axisTick: {
          //   show: false //不显示坐标轴刻度线
          // },
          // axisLine: {
          //   show: false //不显示坐标轴线
          // },
          // axisLabel: {
          //   show: false //不显示坐标轴上的文字
          // }
        },
        legend: {
          left: '2%',
          top: '2%',
          type: 'scroll',
          textStyle: {
            color: '#000',
            borderColor: '#324157',
            shadowColor: '#333',
            fontSize: 20,
            shadowBlur: 5,
            shadowOffsetX: 6,
            shadowOffsetY: 6
          }
        },
        grid: {
          x: '0%',
          y: '0%',
          x2: '0%',
          y2: '0%'
        },
        toolbox: {
          left: '2%',
          top: '2%',
          itemSize: 30,
          iconStyle: {
            borderColor: '#324157',
            borderWidth: 2.1,
            shadowColor: '#333',
            shadowBlur: 5,
            shadowOffsetX: 6,
            shadowOffsetY: 6
          },
          feature: {
            brush: {
              type: ['rect', 'keep', 'clear'],
              title: {
                keep: '多选',
                clear: '清除'
              }
            }
          }
        },
        brush: {
          toolbox: ['rect', 'keep', 'clear'],
          brushMode: 'multiple',
          throttleDelay: 500,
          xAxisIndex: [0],
          brushStyle: null
        },
        series: []
      },
      area: []
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.id))
    this.chart.showLoading()
    this.chart.setOption(this.options, true)
    this.permissionType_origin = this.permissionType
    document.getElementById('img').crossOrigin = 'anonymous'
    this.img.src = this.imgSrc
    this.img.width = '100%'
    this.img.height = '100%'
    this.canvas = document.createElement('canvas')
    this.context = this.canvas.getContext('2d')
    console.log(this.chart.getWidth())
    this.canvas.width = this.chart.getWidth()
    this.canvas.height = this.chart.getHeight()
    this.img2 = document.getElementById('img')
    this.img2.width = this.chart.getWidth()
    this.img2.height = this.chart.getHeight()
    this.options.backgroundColor.image = this.canvas
    this.img2.onload = () => {
      this.context.drawImage(
        this.img2,
        0,
        0,
        this.chart.getWidth(),
        this.chart.getHeight()
      )
      console.log(this.img2)
    }
    setTimeout(() => {
      let dataURL = this.canvas.toDataURL('image/png')
      this.img3.src = dataURL
      this.img3.onload = () => {
        if (devicePixelRatio >= 1) {
          this.canvas.width = this.chart.getWidth() * devicePixelRatio
          this.canvas.height = this.chart.getHeight() * devicePixelRatio
        } else {
          this.canvas.width = this.chart.getWidth() / devicePixelRatio
          this.canvas.height = this.chart.getHeight() / devicePixelRatio
        }
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
        this.context.drawImage(
          this.img3,
          0,
          0,
          this.canvas.width,
          this.canvas.height
        )
        this.options.brush.brushStyle =
          this.permissionType === 'safe'
            ? this.brushStyle_safe
            : this.brushStyle_danger
        this.chart.setOption(this.options)
        this.$nextTick(() => {
          this.chart.resize()
          this.chart.hideLoading()
          let areas = []
          if (this.areaSelected) {
            for (let i = 0; i < this.areaSelected.length; i++) {
              areas.push({
                xAxisIndex: 0,
                brushType: 'rect',
                coordRange: this.areaSelected[i]
              })
            }
          }
          setTimeout(() => {
            this.chart.dispatchAction({
              type: 'brush',
              areas: areas
            })
          }, 100)
        })
      }
    }, 1000)
    this.chart.on('brushEnd', this.handleBrushEnd)
    this.chart.on('click', this.handleClick)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {},
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.showLoading()
      this.chart.setOption(this.options, true)
    },
    handleBrushEnd(params) {
      console.log(params)
      this.area = []
      for (let i = 0; i < params.areas.length; i++) {
        this.area.push([
          [
            Number(
              (
                params.areas[i].coordRanges[0][0][0] -
                mapData.mapWidth / 2
              ).toFixed(2)
            ),
            Number(
              (
                params.areas[i].coordRanges[0][0][1] -
                mapData.mapWidth / 2
              ).toFixed(2)
            )
          ],
          [
            Number(
              (
                params.areas[i].coordRanges[0][1][0] -
                mapData.mapHeight / 2
              ).toFixed(2)
            ),
            Number(
              (
                params.areas[i].coordRanges[0][1][1] -
                mapData.mapHeight / 2
              ).toFixed(2)
            )
          ]
        ])
      }
      this.$emit('areaSelected', this.area)
    },
    handleClick(params) {
      console.log(params)
    }
  },
  watch: {
    permissionType(val) {
      if (val === this.permissionType_origin) {
        let areas = []
        if (this.areaSelected) {
          for (let i = 0; i < this.areaSelected.length; i++) {
            areas.push({
              xAxisIndex: 0,
              brushType: 'rect',
              coordRange: this.areaSelected[i]
            })
          }
        }
        setTimeout(() => {
          this.chart.dispatchAction({
            type: 'brush',
            areas: areas
          })
        }, 100)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
@import '~@/styles/variables.scss';
// .map-container {
//   position: relative;
//   width: calc(100% - 54px);
//   height: calc(100vh + 25px);
// }
#office {
  // position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
// #chart {
//   background: url('~@/assets/office/office2.jpg') center no-repeat;
//   background-size: 80% 100%;
// }
</style>
